import React, { Component } from 'react'
import { connect } from 'react-redux'
import { toggleShowType } from '@act/replayAction'


class OutDmSwitch extends Component {
  clickSwitch = () => {
    const { show, dispatch } = this.props
    dispatch(toggleShowType('dm', !show))
  }
  render() {
    const { show, showFooter, color_theme } = this.props

    return (
      <div className={`replay_out_dm_switch ${show ? 'switch_on' : 'switch_off'} ${color_theme === 'red' ? 'red' : ''} ${showFooter ? 'show_footer' : ''}`} onClick={this.clickSwitch}>
        <div className="switch">{ show ? '开' : '关' }</div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    show: state.ReplayState.showType.dm,
    showFooter: state.ReplayState.showType.footer,
    color_theme: state.MainScreenState.info.color_theme
  }
}

export default connect(mapStateToProps)(OutDmSwitch)
